<@layout.extends name="layout/template.ftl">
	<@layout.put block="title">用户管理</@layout.put>

	<@layout.put block="contents">

<!-- content starts -->
<div>
    <ul class="breadcrumb">
        <li>
            <a href="#">后台管理</a>
        </li>
        <li>
            <a href="#">系统管理</a>
        </li>
        <li>
            <a href="${request.contextPath}/sys/user">用户管理</a>
        </li>
    </ul>
</div>

<div class="row">
	<div class="box col-md-12">
		<div class="box-inner">
			<div class="box-header well" data-original-title="">
				<h2>
					<i class="glyphicon glyphicon-search"></i>
					搜索条件
				</h2>
			</div>
			<div class="box-content">
				<form class="form-inline">
				  <div class="form-group">
				    <label for="name">姓名</label>
				    <input type="text" class="form-control" id="name" autocomplete="off" placeholder="姓名">
				  </div>
				  <div class="form-group">
				    <label for="mobile">手机号</label>
				    <input type="text" class="form-control" id="mobile" autocomplete="off" placeholder="手机号">
				  </div>
				  <button type="button" class="btn btn-default" id="userSearchButton">搜索</button>
				</form>
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="box col-md-12">
		<div class="box-inner">
			<div class="box-header well" data-original-title="">
				<h2>
					<i class="glyphicon glyphicon-list"></i>
					用户列表
				</h2>
			</div>
			<div class="box-content">
				<table id="userListTable" class="table table-striped table-bordered responsive">
					<thead>
		                <tr>
		                    <th>ID</th>
		                    <th>归属公司</th>
		                    <th>归属部门</th>
		                    <th>姓名</th>
		                    <th>手机</th>
		                    <th>邮箱</th>
		                    <th>工号</th>
		                </tr>
					</thead>
				</table>
			</div>
		</div>
	</div>
</div>




<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
	var userDataTable = $('#userListTable').dataTable( {
		"language" : dataTablesLanguage,
		"pagingType": "full_numbers",
		"ordering": false,
		"searching": false,
		serverSide: true,
		aLengthMenu:[20,30,50,100],
        "ajax": {
            "url": "${request.contextPath}/sys/user/select-user-list",
            "data": function (d) {
            	 d.columns = null; 
            	 d.search = null;
            	 d.name = $('#name').val();
            	 d.mobile = $('#mobile').val();
            }
            
        },
        "columns": [
            { "data": "id" },
            { "data": "companyName" },
            { "data": "officeName" },
            { "data": "name" },
            { "data": "mobile" },
            { "data": "email" },
            { "data": "no" }
        ]
    } );
    
    $("#userSearchButton").bind("click", function () { //按钮 触发table重新请求服务器
        userDataTable.fnDraw();
    });
    
});

</script>

	</@layout.put>
</@layout.extends>


